<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { files, asin } from "../apis/chart";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const echarts = proxy.echarts;

const content = ref();
const asinList = ref();
const fileList = ref();
const chooseAsin = ref();
const chooseFile = ref();
const asinsDisabled = ref(true);

const option = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: [],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [],
});

// 获取文件列表
files()
  .then((res) => {
    fileList.value = res.files;
    ElMessage({
      message: "成功获取文件列表",
      type: "success",
    });
  })
  .catch(() => {
    ElMessage({
      message: "获取文件列表失败",
      type: "error",
    });
  });

// 获取文件对应的asin
const getAsins = () => {
  asinsDisabled.value = true;
  files(chooseFile.value).then((res) => {
    asinList.value = res.data;
    asinsDisabled.value = false;
    ElMessage({
      message: "成功获取ASIN列表",
      type: "success",
    });
  });
};

// 获取asin对应的图表数据
const getData = () => {
  asin(chooseAsin.value).then((res) => {
    option.value.legend.data = res.data.legend;
    option.value.xAxis.data = res.data.x;
    option.value.series = res.data.series;
    let mychart = echarts.init(content.value);
    mychart.clear();
    mychart.setOption(option.value, { merge: true, notMerge: false });
  });
};

const uploadFileList = ref([]);

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};


const beforeUpload = (file) => {
  // 前端判断文件是否重名
  if (fileList.value.some((item) => item === file.name)) {
    ElMessage({
      message: `上传失败，文件名字重复`,
      type: "error",
    });
    return false;
  }
  return true;
};

const onError = (err) => {
  if (err.status === 400) {
    ElMessage({
      message: `${err}`,
      type: "error",
    });
  }
};

const handleSuccess = () => {
  ElMessage({
      message: `上传文件成功`,
      type: "success",
    });
}
onMounted(() => {});
</script>

<template>
  <div class="chart">
    <div class="header">
      <el-upload
        v-model:file-list="uploadFileList"
        action="http://127.0.0.1:8000/uploadfile/"
        multiple
        :on-error="onError"
        :limit="3"
        :on-exceed="handleExceed"
        :show-file-list="false"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
      >
        <el-button type="primary">导入文件</el-button>
      </el-upload>
      <el-select
        placeholder="请选择EXCEL"
        style="width: 240px"
        v-model="chooseFile"
        @change="getAsins"
      >
        <el-option
          v-for="item in fileList"
          :key="item"
          :label="item"
          :value="item"
      /></el-select>
      <el-select
        placeholder="请选择ASIN"
        style="width: 240px"
        v-model="chooseAsin"
        :disabled="asinsDisabled"
        @change="getData"
      >
        <el-option
          v-for="item in asinList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <span style="color: blue; font-size: 14px"
        >*请先选择EXCEL文件，再选择ASIN</span
      >
    </div>
    <div class="content" ref="content"></div>
  </div>
</template>

<style scoped>
.chart {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header{
  display: flex;
}
.content {
  width: 100%;
  height: 100%;
}
</style>
